<template>
    <div>
        <el-backtop></el-backtop>
        <Header></Header>
        <Navigator></Navigator>
        <div class="container">
            <div class="describe">
                <div class="name" @dblclick="edit" slot="reference">{{article.name}}</div>
                <div class="created_by">作者：{{article.created_by}}</div>
                <div class="modified_by">修改：{{article.modified_by}}</div>
                <div class="time" @click="gotoComment">时间：{{article.time}}</div>
                <div class="thumbs" @click="thumbsUp">{{article.thumbs}}<i class="el-icon-lollipop"></i></div>
            </div>
            <div v-html="content" id="content"></div>
            <Comment id="comment"></Comment>
        </div>

    </div>
</template>

<script>
    import showdown from 'showdown/dist/showdown'
    import Header from "@/components/Header";
    import Navigator from "@/components/Navigator";
    import Comment from "@/components/Comment";
    export default {
        name: "Content",
        components: {Comment, Navigator, Header},
        data(){
            return{
                article: {"content": null,"name":null,
                  "created_by":null,"modified_by":null,"time":null,"thumbs":null},
                content: null
            }
        },
        methods:{
            getData:function () {
                // eslint-disable-next-line no-undef
                axios.get("/article/get_by_id",{
                    params:{
                        "id": this.$route.query.id,
                        "token": sessionStorage.getItem("token")
                    }
                })
                .then(res => {
                    res = res.data
                    console.log(res.data.list[0])
                    this.article = res.data.list[0]

                    // 转换为html格式
                    const converter = new showdown.Converter()
                    const text = res.data.list[0].content
                    this.content = converter.makeHtml(text)
                })
            },

            edit:function () {
                const con = window.confirm("delete the article?")

                if (con === true){
                    // eslint-disable-next-line no-undef
                    axios.get("/article/del",{params:{
                            "id": this.$route.query.id,
                            "token": sessionStorage.getItem("token")
                        }})
                        .then(res=>{
                            res = res.data
                            if (res.code === 200){
                                this.$message({
                                    message: 'add successfully',
                                    type: 'success'
                                })
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                })
                            }
                        })
                    this.$router.go(-1)
                }
            },

            thumbsUp:function () {
                // eslint-disable-next-line no-undef
                axios.get("/article/thumbs_up",{params:{
                        "id": this.$route.query.id,
                        "token": sessionStorage.getItem("token")
                    }})
                    .then(res=>{
                        res = res.data
                        if (res.code === 200){
                            this.article.thumbs++
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                    })
            },

            gotoComment:function (){
              document.querySelector('#comment').scrollIntoView()
            }
        },
        created() {
            this.getData()
        }
    }
</script>

<style scoped lang="scss">
    #content{
        text-align: left;
        margin-bottom: 100px;
    }

    .container{
        display: flex;
        flex-direction: column;

        margin: 0 auto;
        width: 60%;

        .describe{
            margin-top: 20px;
            margin-bottom: 50px;

            border-bottom: 4px rgba(0, 0, 0, .12) solid;

            display: flex;
            flex-wrap: wrap;

            .name{
                width: 100%;
                font-size: 32px;
                font-weight: 600;
                margin-bottom: 20px;
                user-select: none;

                &:hover{
                    cursor: pointer;
                }
            }

            .created_by{
                width: 25%;
                font-size: 20px;
                color: grey;
                user-select: none;
            }

            .modified_by{
                width: 25%;
                font-size: 20px;
                color: grey;
                user-select: none;
            }

            .time{
                width: 25%;
                font-size: 20px;
                color: grey;
                user-select: none;
            }

            .thumbs{
                width: 25%;
                font-size: 20px;
                color: grey;
                user-select: none;
                cursor: pointer;

                &:hover{
                    color: orangered;
                }
            }
        }
    }

</style>
